<template>
	<view>
		<image class="image_my" src="../../static/users/background.png" mode=""></image>
		<view class="main">
			<view class="head">
				<image class="my_avatar" src="../../static/users/avtar.png" mode=""></image>
				<view class="name">
					山海未眠
				</view>

				<image class="my_sex" src="../../static/users/man.png" mode=""></image>
				<view class="id">
					ID:123659874
				</view>
				<view class="address">
					四川大学锦城学院锦江校区
				</view>

				<view class="guanzhu" @click="like=true" v-if="!like">
					关注
				</view>

				<view class="quguan" @click="like=false" v-if="like">
					取消关注
				</view>

				<view class="num">
					23 <text class="text1">关注</text>
					1.2w <text class="text1">粉丝</text>
				</view>
			</view>

			<view class="ge"></view>

			<view class="tiezi">
				<view class="title">
					TA的帖子
				</view>

				<view class="tie">
					<view class="tan" v-for="(item,index) in menu" @click="jump">
						<image class="image1" src="../../static/users/lun2.png" mode="aspectFill"></image>
						<view class="titles">
							天气真好 秋季到来落叶枯黄。
						</view>
						<image class="image2" src="../../static/users/hearer.png" mode="aspectFill"></image>
						<view class="name">
							山海未眠
						</view>
						<image @click.stop="menu[index].show=true" v-if="!item.show" class="image3"
							src="../../static/users/zan.png" mode="aspectFill"></image>
						<image @click.stop="item.show=false" v-if="item.show" class="image3"
							src="../../static/users/zanguo.png" mode="aspectFill"></image>

						<view class="num_zan">
							6
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				like: false,
				menu: [],
			}
		},
		methods: {
          jump(){
          	uni.navigateTo({
          		url:"../Postdetails/Postdetails"
          	})
          }
		},
		onLoad() {
			for (var i = 0; i < 10; i++) {
				this.menu.push({
					show: false
				})
			}
		
			for (var j = 0; j < 10; j++) {
				this.list.push({
					shower: false
				})
			}
			console.log(this.list);
		}
	}
</script>

<style lang="scss">
	.image_my {
		width: 750rpx;
		height: 310rpx;
	}


	.main {
		position: absolute;
		top: 260rpx;
		width: 750rpx;
		height: 1198rpx;
		background: #FAFBFC;
		border-radius: 40rpx;

		.head {
			width: 750rpx;
			height: 280rpx;

			.guanzhu {
				position: absolute;
				top: 78rpx;
				right: 30rpx;
				text-align: center;
				line-height: 66rpx;
				width: 160rpx;
				height: 66rpx;
				background: #181818;
				border-radius: 33rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.quguan {
				position: absolute;
				top: 78rpx;
				right: 30rpx;
				text-align: center;
				line-height: 66rpx;
				width: 160rpx;
				height: 66rpx;
				background: #B5B3B2;
				border-radius: 33rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.my_avatar {
				position: absolute;
				top: 36rpx;
				left: 36rpx;
				width: 138rpx;
				height: 138rpx;
			}

			.name {
				position: absolute;
				left: 204rpx;
				top: 61rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
			}

			.my_sex {
				position: absolute;
				left: 340rpx;
				top: 63rpx;
				width: 40rpx;
				height: 40rpx;

			}

			.address {
				position: absolute;
				left: 203rpx;
				top: 110rpx;
				width: 280rpx;
				height: 40rpx;
				border: 1px solid #000000;
				border-radius: 20rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #181818;
			}

			.id {
				position: absolute;
				top: 68rpx;
				right: 234rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
			}

			.num {
				position: absolute;
				top: 209rpx;
				left: 30rpx;
				padding-left: 10rpx;
				width: 550rpx;
				height: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;

				.text1 {
					margin: 0 50rpx 0 10rpx;
				}
			}
		}

		.ge {
			width: 750rpx;
			height: 10rpx;
			background: #F2F4FA;
		}

		.tiezi {
			width: 750rpx;
           
			.title {
				margin: 30rpx 0 30rpx 40rpx;
				width: 110rpx;
				height: 25rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
			}

			.tie {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				.tan {

					width: 334rpx;
					height: 620rpx;
					position: relative;

					.image1 {
						width: 334rpx;
						height: 460rpx;

					}

					.titles {
						margin: 20rpx 0 0 11rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #181818;
						line-height: 36rpx;
					}

					.image2 {
						margin: 19rpx 0 0 9rpx;
						width: 45rpx;
						height: 45rpx;
					}

					.name {
						position: absolute;
						bottom: 45rpx;
						left: 70rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #666666;
					}

					.image3 {
						position: absolute;
						bottom: 46rpx;
						left: 276rpx;
						width: 36rpx;
						height: 30rpx;
					}

					.num_zan {
						position: absolute;
						right: 4rpx;
						bottom: 46rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 300;
					}
				}
			}
		}


	}
</style>
